<template>
    <div>
        <el-header style="text-align: right; font-size: 15px">
            <span>
                欢迎使用学籍管理系统-学籍更改
            </span>
        </el-header>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="s_id"
                    label="学号"
                    width="100">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_name"
                    label="姓名"
                    width="100%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_sex"
                    label="性别"
                    width="60%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_age"
                    label="年龄"
                    width="60%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_nation"
                    label="民族"
                    width="70%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_political"
                    label="政治面貌"
                    width="100%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_grade"
                    label="年级"
                    width="100%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_class"
                    label="班级"
                    width="100%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_area"
                    label="地区"
                    width="108%">
            </el-table-column>

            <el-table-column
                    fixed
                    prop="s_records"
                    label="奖惩记录"
                    width="100%">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="s_return"
                    label="休复转退标记"
                    width="110%">
            </el-table-column>

            <el-table-column
                    fixed
                    label="操作"
                    width="88%">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteStudent(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="9"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            edit(row) {
                this.$router.push({
                    path: '/Page10',
                    query:{
                        id:row.s_id
                    }
                })
            },
            deleteStudent(row){
                const _this = this
                _this.$confirm('此操作将永久删除该学生学籍, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:8181/student/deleteById/'+row.s_id).then(function (resp) {
                        if(resp = "success"){
                            window.location.reload()
                        };
                    })

                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            page(currentPage){
                const _this = this
                axios.get('http://localhost:8181/student/findAll/'+currentPage+'/9').then(function (resp) {
                    _this.tableData = resp.data.content
                    _this.total = resp.data.totalElements
                })
            }
        },
        created() {
            const _this = this
            axios.get('http://localhost:8181/student/findAll/1/9').then(function (resp) {
                _this.tableData = resp.data.content
                _this.total = resp.data.totalElements
            })
        },
        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>